@extends('layouts.home')

@section('content')
    <div class="layui-card">
        <div class="layui-card-header">
            添加网站
            <span class="layui-badge">可以免费提交2个网站!……谢谢大家</span>
        </div>
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane site-add-data" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">网站名称</label>
                    <div class="layui-input-inline" style="width: 50%">
                        <input type="text" name="name" required="" lay-verify="required" placeholder="请输入网站名称" class="layui-input" value="{{ old('name') }}">
                    </div>
                    <div class="layui-form-mid layui-word-aux layui-hide-xs">15个汉字以内</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站域名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="url" required="" lay-verify="required" placeholder="例如：www.021xw.com" class="layui-input" value="{{ old('url') }}">
                    </div>
                    <a href="javascript:;" class="layui-btn get-web-seo">一键获取SEO数据</a>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属栏目</label>
                    <div class="layui-input-inline">
                        <select name="catid[]" lay-filter="classify" lay-verify="required">
                            <option value="">---- 栏目 ----</option>
                            @foreach($column as $v)
                                <option value="{{ $v->id }}"> {{ $v->title }} </option>
                            @endforeach
                        </select>
                        <div class="layui-unselect layui-form-select">
                            <div class="layui-select-title">
                                <input type="text" placeholder="---- 栏目 ----" value="" readonly="" class="layui-input layui-unselect">
                                <i class="layui-edge"></i>
                            </div>
                            <dl class="layui-anim layui-anim-upbit">
                                <dd lay-value="" class="layui-select-tips">---- 栏目 ----</dd>
                                <dd lay-value="1" class="">休闲娱乐</dd>
                                <dd lay-value="2" class="">购物网站</dd>
                                <dd lay-value="11" class="">交通旅游</dd>
                                <dd lay-value="12" class="">新闻媒体</dd>
                            </dl>
                        </div>
                    </div>
                    <div class="layui-input-inline">
                        <select name="catid[]" id="catid" lay-verify="required">
                            <option value="">---- 子栏目 ----</option>
                        </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="---- 子栏目 ----" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">---- 子栏目 ----</dd></dl></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属地区</label>
                    <div class="layui-input-inline">
                        <select name="areaid[]" class="province" lay-filter="province" lay-verify="required">
                            <option value="">---- 省份 ----</option>
                            <option value="2">北京</option>
                            <option value="3">安徽</option>
                            <option value="4">福建</option>
                            <option value="5">甘肃</option>
                            <option value="6">广东</option>
                            <option value="7">广西</option>
                            <option value="8">贵州</option>
                            <option value="9">海南</option>
                            <option value="10">河北</option>
                            <option value="11">河南</option>
                            <option value="12">黑龙江</option>
                            <option value="13">湖北</option>
                            <option value="14">湖南</option>
                            <option value="15">吉林</option>
                            <option value="16">江苏</option>
                            <option value="17">江西</option>
                            <option value="18">辽宁</option>
                            <option value="19">内蒙古</option>
                            <option value="20">宁夏</option>
                            <option value="21">青海</option>
                            <option value="22">山东</option>
                            <option value="23">山西</option>
                            <option value="24">陕西</option>
                            <option value="25">上海</option>
                            <option value="26">四川</option>
                            <option value="27">天津</option>
                            <option value="28">西藏</option>
                            <option value="29">新疆</option>
                            <option value="30">云南</option>
                            <option value="31">浙江</option>
                            <option value="32">重庆</option>
                            <option value="33">香港</option>
                            <option value="34">澳门</option>
                            <option value="35">台湾</option>
                            <option value="3434">海外</option>
                        </select>
                        <div class="layui-unselect layui-form-select">
                            <div class="layui-select-title">
                                <input type="text" placeholder="---- 省份 ----" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i>
                            </div>
                            <dl class="layui-anim layui-anim-upbit">
                                <dd lay-value="" class="layui-select-tips">---- 省份 ----</dd>
                                @foreach($area as $v)
                                    <dd lay-value="{{ $v->id }}" class="">{{ $v->name }}</dd>
                                @endforeach
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block">
                        <input type="text" name="keywords" required="" lay-verify="required" maxlength="100" placeholder="10个关键词以内，多个关键词之间用“,”半角逗号隔开；" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">网站描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" placeholder="120个字以内，内容要匹配网站实际内容；" class="layui-textarea" required="" lay-verify="required"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">ICO图标</label>
                    <div class="layui-input-block">
                        <div class="upload-input" style="position: relative">
                            <input type="hidden" name="icon" class="app-icon-input">
                            <img class="layui-upload-img app-icon-img" src="https://statics.qcmlw.com/images/default.jpg">
                            <p class="add-del del-icon"><i class="iconfont icon-guanbi"></i></p>
                            <a class="layui-btn layui-btn-normal layui-btn-fluid app-icon-btn" id="app-icon-btn">上传ICO图标<br><em>尺寸：64x64</em></a><input class="layui-upload-file" type="file" accept="undefined" name="file">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">IP地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="data[ip]" required="" lay-verify="required" value="0" class="layui-input">
                    </div>
                    <label class="layui-form-label">世界排名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="data[alexa]" required="" lay-verify="required" value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">百度权重</label>
                    <div class="layui-input-inline">
                        <input type="text" name="data[br]" required="" lay-verify="required" value="0" class="layui-input">
                    </div>
                    <label class="layui-form-label">移动权重</label>
                    <div class="layui-input-inline">
                        <input type="text" name="data[mbr]" required="" lay-verify="required" value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">谷歌PR</label>
                    <div class="layui-input-inline">
                        <input type="text" name="data[pr]" required="" lay-verify="required" value="0" class="layui-input">
                    </div>
                    <label class="layui-form-label">搜狗PR</label>
                    <div class="layui-input-inline">
                        <input type="text" name="data[sbr]" required="" lay-verify="required" value="0" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="formSite">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scriptsAfterJs')
    <script>
        layui.use(['layer', 'form','jquery','element','table','layedit','upload'], function(){
            var layer = layui.layer ,$ = layui.jquery ,element = layui.element ,table = layui.table ,layedit = layui.layedit ,form = layui.form ,upload = layui.upload;
            $('.del-icon').on('click',function () {
                $('.app-icon-img').attr('src', default_images);
                $('.app-icon-input').val('');
                $('.del-icon').css('opacity','');
            });
            $('.del-qrcode').on('click',function () {
                $('.app-qrcode-img').attr('src', default_images);
                $('.app-qrcode-input').val('');
                $('.del-qrcode').css('opacity','');
            });
            $('#app-all-img').on('click','.del-all',function () {
                var blood = $(this).parent().remove();
                $('#app-all-img').css('margin-right','')
                $('#app-all-img-btn').show();
            });
            $('.get-web-seo').on('click',function () {
                var url = $('input[name="url"]').val();
                if(!url){
                    layer.msg('请输入域名，再点击获取！',{skin: 'error',time:1000,shade: [0.7, '#000'],shadeClose:true});
                    return false;
                }
                var loading = layer.msg('正在操作中...请稍后!', {icon: 16,skin:'loading',time: 1000*1000,shade: [0.7,'#000']});
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "post",
                    url: "{{ route('rank') }}",
                    data: {name:url},
                    success: function (msg) {
                        layer.close(loading);
                        $.ajax({
                            type: "get",
                            url: "{{ url('webSiteShot/') }}"+url,
                            dataType: "json",
                            cache: false,
                            success: function(str){
                                layer.msg('网站快照已经生成!……');
                            }
                        });
                        if(msg.code == 1){
                            $('input[name="data[ip]"]').val(msg.data.ip);
                            $('input[name="data[sbr]"]').val(msg.data.sbr);
                            $('input[name="data[br]"]').val(msg.data.br);
                            $('input[name="data[pr]"]').val(msg.data.pr);
                            $('input[name="data[mbr]"]').val(msg.data.mbr);
                            $('input[name="data[alexa]"]').val(msg.data.alexa);
                            layer.msg('数据已经抓取成功!……');
                        }else{
                            layer.msg('网站无法访问，请重试！',{skin: 'success',time:1500,shade: [0.7, '#000'],shadeClose:true});
                        }
                    },
                    error: function () {
                        layer.close(loading);
                        layer.msg('网站无法访问，请重试！',{skin: 'error',time:1500,shade: [0.7, '#000'],shadeClose:true});
                    }
                });
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "post",
                    url: "{{ route('rank') }}",
                    data: {name:url},
                    success: function (msg) {
                        layer.close(loading);
                        if(msg.code == 1){
                            $('input[name="data[ip]"]').val(msg.data.ip);
                            $('input[name="data[sbr]"]').val(msg.data.sbr);
                            $('input[name="data[br]"]').val(msg.data.br);
                            $('input[name="data[pr]"]').val(msg.data.pr);
                            $('input[name="data[mbr]"]').val(msg.data.mbr);
                            $('input[name="data[alexa]"]').val(msg.data.alexa);
                        }else{
                            layer.msg('网站无法访问，请重试！',{skin: 'success',time:1500,shade: [0.7, '#000'],shadeClose:true});
                        }
                    },
                    error: function () {
                        layer.close(loading);
                        layer.msg('网站无法访问，请重试！',{skin: 'error',time:1500,shade: [0.7, '#000'],shadeClose:true});
                    }
                });
                return false;
            });
            form.on('select(classify)',function (data) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "post",
                    url: "{{ route('website.classify') }}",
                    data: {parent_id:data.value},
                    success: function (msg) {
                        $('#catid').html('<option value="">---- 子栏目 ----</option>').append(msg.data);
                        form.render('select');
                    }
                });
                return false;
            });
            var uploadIcon = upload.render({
                elem: '#app-icon-btn'
                ,accept: 'file' //普通文件
                ,exts: 'ico' //只允许上传ico文件
                ,headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
                ,url:'{{ route('website.img') }}'
                ,before: function(obj){
                    obj.preview(function(index, file, result){
                        $('.app-icon-img').attr('src', result);
                        $('.app-icon-input').val(result);
                        $('.del-icon').css('opacity',1);
                    });
                }
            });
            form.on('submit(formSite)', function(data){
                var loading = layer.msg('正在添加...请稍后!', {icon: 16,skin:'loading',time: 1000*1000,shade: [0.7,'#000']});
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "post",
                    url: "{{ route('website.store') }}",
                    data: data.field,
                    success: function (msg) {
                        layer.close(loading);
                        if(msg.code=='error'){
                            layer.msg(msg.data,{skin: msg.code,time:1500,shade: [0.7, '#000'],shadeClose:true});
                        }else{
                            layer.msg(msg.data,{skin: msg.code,time:1500,shade: [0.7, '#000'],shadeClose:true},function () {
                                location.href= msg.url;
                            });
                        }
                    }
                });
                return false;
            });
        });
    </script>
@endsection
